import { Menu, Drawer } from 'antd';
import { Form, Input, Button, Checkbox,notification } from 'antd';
import React from 'react';
import axios from 'axios'
import {
  UserOutlined,
} from '@ant-design/icons';
import Register from './Register';

class Login extends React.Component {
  state = {
    collapsed: false,
    visible: false,
    childrenDrawer: false,
  };

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };
  showChildrenDrawer = () => {
    this.setState({
      childrenDrawer: true,
    });
  };

  onChildrenDrawerClose = () => {
    this.setState({
      childrenDrawer: false,
    });
  };
  onClose = () => {
    this.setState({
      visible: false,
    });
  };
  handleSubmit() {
    axios.post('/user', {
      username: this.state.username,
      password: this.state.password
    })
      .then((response)=> {
        
        if (response.data.state) {
          this.loginSuccess('success');
          console.log(response.data.token);
            var d = new Date();
            d.setTime(d.getTime() + (30*24*60*60*1000));
            var expires = "expires="+ d.toUTCString();
            document.cookie = "token" + "=" + response.data.token + ";" + expires + ";path=/";
          window.location.reload();
        }else{
            this.loginError('error');
        ;}
      })
      .catch((error)=> {
        console.log(error);
      });
  }
  loginError = type => {
    notification[type]({
      message: '用户名和密码不匹配！'
  
    });
  };  
    loginSuccess = type => {
      notification[type]({
        message: '登录成功！',
      });
    };
  render() {
    const onFinish = values => {
      this.setState({
        username: values.username,
        password: values.password
      }, () => this.handleSubmit());
    };
    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };
    const data = (this.state || {}).data


    return (
      <div style={{ width: 256 }}>
        <Menu theme="dark" mode="inline" selectable={false} onClick={this.showDrawer}>
          <Menu.Item key="1" icon={<UserOutlined />} >
            登录
            </Menu.Item>
        </Menu>
        <Drawer
          title="登入到摸鱼世界"
          width={480}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
            </div>
          }
        >
          <Form
            {...layout}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="游戏ID"
              name="username"
              rules={[{ required: true, message: '请输入你的用户名！' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入你的密码！' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>记住密码</Checkbox>
            </Form.Item>

            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                登录
          </Button>
            </Form.Item>
          </Form>
          <p className="register_button">第一次登录？<Button type="link" onClick={this.showChildrenDrawer}>
            注册
          </Button></p>

          <Drawer
            title="注册新用户"
            width={480}
            closable={false}
            onClose={this.onChildrenDrawerClose}
            visible={this.state.childrenDrawer}
          >
            <Register />
          </Drawer>
        </Drawer>
      </div>
    );
  }
}

export default Login;